<template>
  <div>
    <div class="q1">
      <card
        :price="parseInt(products.avgPrice.replace(/[^\d]/g, ' ')).toFixed(2)"
      >
        <template #tags>
          <h4>{{ products.name }}</h4>
          <p>{{ products.address }}</p>
          <p>总部：郑州二七区桐柏路与人民路交叉路口</p>
          <h6 style="float: right">
            <stepper
              v-model="num1"
              theme="round"
              button-size="22"
              disable-input
            />
          </h6>
        </template>
      </card>
    </div>
    <address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
    <van-dialog />
    <submit-bar :price="tolprice" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { areaList } from '@vant/area-data'
import { Toast, Stepper, AddressEdit, SubmitBar, Card, Dialog } from 'vant'
import router from '../../router'
import { getToken } from '../../utils/tools'
import axios from 'axios'
const a = getToken()
const { replace } = useRouter()
const router1 = useRouter()
const route = useRoute()
const tid = ref(route.query.tid) // 分类id
const num1 = ref(0)
const perprice = ref(0)
console.log(num1.value, perprice.value)
const tolprice = ref(num1.value * perprice.value * 100)
const VanDialog = Dialog.Component
const products = ref([]) // 商品详情

console.log(products.value.avgPrice)
// let str = 'aa1234bb'
// let num = str.replace(/[^\d]/g, ' ')
// console.log(num)

//返回上一级
const fanhui = () => {
  router.go(-1)
}

//跳转
const goto = (i) => {
  router1.push({
    name: 'DETAIL',
    query: { tid: i }
  })
}
//监听变化
watch(num1, (a, b) => {
  console.log(a, b, tolprice.value)
  tolprice.value =
    a * parseInt(products.value.avgPrice.replace(/[^\d]/g, ' ')) * 100
})

//获取商品xiangqing
axios({
  method: 'get',
  url: 'http://47.104.75.203:8080/api/shop/query/' + tid.value,
  headers: {
    Authorization: a
  }
}).then((res) => {
  console.log(res.data.data)
  products.value = res.data.data
})

//提交订单
const flag = 0
const onSave = () => {
  flag = 1
  Toast('保存成功！请提交订单')
}
const onSubmit = () => {
  if (flag == 1) {
    Dialog.alert({
      message: '支付未完成！请检查支付环境'
    }).then(() => {
      // on close
    })
  } else {
    Dialog.alert({
      message: '请把地址填写完整'
    }).then(() => {
      // on close
    })
  }
}
</script>
<style scoped>
.top1 {
  z-index: 999;
  position: relative;
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search1 {
  flex: 1;
  position: relative;
}
.search1 input {
  padding: 0 10px;
  height: 30px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(21, 19, 19, 0.475);
  border: none;
}
.ss {
  font-size: 20px;
  position: absolute;
  top: 5px;
  left: calc(50% - 20px);
}
.position {
  width: 8rem;
  color: blue;
}

.more1 {
  font-size: 25px;
  width: 5rem;
}
/* topbar */
.navbar {
  margin-top: 10px;
  display: flex;
}
.navbar li {
  text-align: center;
  flex: 1;
}
</style>
